<template>
  <div class="healthInfo pd-20">
    <el-input v-model="param.name"
              placeholder="请输入服务名称"
              class="w-200"
              @clear="handleQuery"
              clearable></el-input>
    <el-input v-model="param.nickName"
              placeholder="请输入医生姓名"
              class="w-200"
              @clear="handleQuery"
              clearable></el-input>
    <el-select v-model="param.status"
               clearable
               @clear="handleQuery"
               @change="handleQuery"
               placeholder="请选择服务包状态"
               class="w-200">
      <el-option label="已上架"
                 :value="1"></el-option>
      <el-option label="已下架"
                 :value="0"></el-option>
    </el-select>
    <el-button @click="handleQuery"
               type="primary">查 询</el-button>
    <el-button @click="handle(2,0)"
               type="primary">新 增</el-button>
    <el-table :data="tableData"
              border
              class="mt-20"
              style="width: 100%">
      <el-table-column align="center"
                       prop="name"
                       label="服务包名称"
                       width="250"></el-table-column>
      <el-table-column align="center"
                       prop="nickName"
                       label="带队专家"></el-table-column>
      <el-table-column align="center"
                       prop="doctorTitleName"
                       label="专家职级"></el-table-column>
      <el-table-column align="center"
                       prop="departmentName"
                       label="科室"></el-table-column>
      <el-table-column align="center"
                       prop="hospitalName"
                       label="所属医院"></el-table-column>
      <el-table-column align="center"
                       prop="totalMonth"
                       label="服务有效期（月）"></el-table-column>
      <el-table-column align="center"
                       prop="price"
                       label="服务价格"></el-table-column>
      <el-table-column align="center"
                       prop="createTime"
                       label="创建时间"
                       width="150"
                       :formatter="formatterDate"></el-table-column>
      <el-table-column align="center"
                       label="状态"
                       width="60">
        <template slot-scope="scoped">
          <span :style="{color:scoped.row.status == 1?'':'red'}">{{scoped.row.status == 1 ?'已上架':'已下架'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       width="350"
                       label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="primary"
                     @click="handle(3,scope.row.id)">编 辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handle(5,scope.row)">删 除</el-button>
          <el-button size="mini"
                     type="info"
                     @click="handle(4,scope.row)">{{scope.row.status === 0 ?'上 架':'下 架'}}</el-button>
          <el-button size="mini"
                     type="warning"
                     plain
                     @click="handle(6,scope.row)">检查医院配置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <adddialog v-if="showdialog"
               :dialogData='dialogData'
               @closedialog='showdialog=false;_getList()' />
    <el-dialog title="医院配置"
               :visible.sync="dialogVisible"
               center
               v-if="showdialogSecond"
               @close='closeSecond'
               width="30%">
      <Select v-model="jsonData"
              filterable
              multiple
              @on-query-change='remoteMethod1'
              @on-change='onchange'
              clearable
              placeholder="请输入医院名称"
              style="width:100%;border-radius:4px">
        <Option v-for="(option, index) in options1"
                :value="option.hospitalId"
                :key="index">{{option.name}}</Option>
      </Select>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="closeSecond">取 消</el-button>
        <el-button type="primary"
                   @click="uploadConfigHospital">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import adddialog from './dialog'
  import { mapGetters } from 'vuex'

  export default {
    name: "healthInfo",
    data () {
      return {
        param: {},
        dialogVisible: false,
        tableData: [],
        pageTotal: 0,
        showdialog: false,
        dialogData: {
          show: true,
          info: {}
        },
        options1: [],
        showdialogSecond: false,
        jsonData: [],
        hospitalPackageId: '',
        jsonTable: []
      }
    },
    mounted () {
      this._getList()
    },
    methods: {
      handleQuery() {
        this.page.pageIndex=0
        this._getList()
      },
      onchange (val) {
      },
      //获取医院
      remoteMethod1 (val) {
        this.post(this.api.hospitalManager.list, { "pageSize": 100, "pageStart": 0, "name": val }).then((res) => {
          this.options1 = res.data.object;
          this.options1.forEach(ele => {
            ele.hospitalId = ele.id
          })
          this.options1 = this.options1.concat(this.jsonTable)
          this.jsonTable.forEach(ele => {
            this.jsonData.push(ele.hospitalId)
          })
        });
      },
      closeSecond () {
        this.showdialogSecond = false
        this.dialogVisible = false
        this.jsonData = []
      },
      uploadConfigHospital () {
        this.post(this.api.cooperationHospital.uploadConfigHospital, { hospitalPackageId: this.hospitalPackageId, jsonData: this.jsonData }).then(res => {
          if (res.data.code === '200') {
            this.$message.success(res.data.message)
            this.dialogVisible = false
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      handle (index, row) {
        switch (index) {
          case 1:
            this._getList()
            break
          case 2:
            this.showdialog = true
            this.dialogData = {
              show: true,
              info: null,
              title: '新增服务包'
            }
            break;
          case 3:
            this.showdialog = true
            this.dialogData = {
              show: true,
              info: row,
              title: '修改服务包'
            }
            break
          case 4:
            let state;
            row.status === 1 ? state = 0 : state = 1;
            this.$confirm(`您是否要${state === 1 ? '上架' : '下架'}该套餐？`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

              this.post(this.api.cooperationHospital.hospitalPackageuploadStatus, { status: state, id: row.id }).then(res => {
                if (res.data.code === '200') {
                  this.$message.success(`${state === 1 ? '上架' : '下架'}成功!`);
                  this._getList()
                } else {
                  this.$message.warning(res.data.message)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            });
            break
          case 5:
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.post(this.api.cooperationHospital.delHospitalPackage, { id: row.id }).then(res => {
                if (res.data.code === '200') {
                  this.$message.success(res.data.message)
                  this._getList()
                } else {
                  this.$message.warning(res.data.message)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            });
            break
          case 6:
            let arr = []
            this.hospitalPackageId = row.id
            this.dialogVisible = true
            this.showdialogSecond = true
            this.post(this.api.cooperationHospital.getConfigHospitalList, { hospitalPackageId: row.id }).then(res => {

              this.jsonTable = res.data.object

              this.remoteMethod1('')
            })
            break
        }

      },
      _getList () {
        let param = {
          name: this.param.name,
          nickName: this.param.nickName,
          status: this.param.status,
          pageSize: this.page.pageSize,
          pageIndex: this.page.pageIndex,
        }
        this.post(this.api.cooperationHospital.getHospitalPackageList, param).then(res => {
          if (res.data.code === '200') {
            this.tableData = res.data.object;
            this.pageTotal = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        })
      },
      formatterDate (row) {
        return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
      },
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page,
      adddialog
    }
  }
</script>

<style scoped lang="scss" type="text/scss" rel="stylesheet/scss">
  .information {
    margin: 10px 0px 0px 0px;
  }
  .btn_1 {
    margin-left: 10px;
  }
  .el-select {
    width: 90%;
  }

  .editorForm {
    height: 750px;
  }

  .editor {
    position: fixed;
    margin-left: -70px;
    width: 70%;
    height: 700px;
    float: left;
  }

  .info {
    height: 750px;
    width: 30%;
    position: absolute;
    top: 78px;
  }

  .info .el-input {
    width: 90%;
  }

  .avatar-uploader {
    width: 100px;
    height: 100px;
    border: 1px dashed #606266;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader:hover {
    border-color: #409eff;
  }

  .avatar-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px;
    height: 98px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .formTitle {
    display: inline-block;
    line-height: 24px;
    font-size: 18px;
    color: #303133;
  }

  .return {
    float: right;
  }
</style>
